<template>
  <dv-full-screen-container id="full-screen-container" style="margin: 0" >
    <Header :falg="2" :title="'详情页面展示仓'" />
    <div class="main-body column">
      <div class="col-5">
        <dv-border-box-10>
          <div class="col column" style="width: 100%;height: 100%">
            <div class="col-3 row">
              <span class="title-name">{{arrNew.title}}</span>
              <span class="title-state">{{arrNew.state}}</span>
            </div>
            <div class="col-9 row">
              <div class="col-8" style="margin-bottom: 1vh;height: 100%; display: flex">
                <div><img style="height: 100%;width: 19vw" :src="arrNew.icon"/></div>
                <div style="margin: 2vh;font-size: 18px;margin-left: 3vw">{{arrNew.text}}</div>
              </div>
              <div class="col-3 column">
                <div class="col-6" style="display: flex">
                  <Textbox style="height: 100%" titleIsShow="总注册志愿者数：" :titleNumber="290"/>
                  <Textbox style="height: 100%" titleIsShow="志愿时长统计：" :titleNumber="2290"/>
                </div>
                <div class="col-6" style="display: flex">
                  <Textbox style="height: 100%" titleIsShow="活动项目总次数：" :titleNumber="139"/>
                  <Textbox style="height: 100%" titleIsShow="积分兑换总次数：" :titleNumber="90"/>
                </div>
              </div>
            </div>
          </div>
        </dv-border-box-10>
      </div>
      <div class="col-4 row">
        <div style="width: 100%; display: flex; overflow-x: hidden;">
          <div style="display: flex;">
            <ActivityCard v-for="i in 15" :devInfo="ActivitList[i-1]" class="col-2 activity" :key="i"></ActivityCard>
<!--            <ActivityCard v-for="i in 15"  class="col-2 activity" :key="i"></ActivityCard>-->
          </div>
        </div>
      </div>
      <div class="col-3">
        <div  class="col row" style="width: 100%;height: 100%; display: flex;justify-content: center;">
          <BusinessCard v-for="i in counter" class="col-3 business" :image="BusinessList[(i+num)-1].image" :name="BusinessList[(i+num)-1].name" :unitTime="BusinessList[(i+num)-1].unitTime" :workTime="BusinessList[(i+num)-1].workTime" :joinTime="BusinessList[(i+num)-1].joinTime"></BusinessCard>
        </div>
      </div>
    </div>
    <dv-decoration-9 style="width: 90px; height: 90px">AI</dv-decoration-9>
  </dv-full-screen-container>
</template>

<script>
import Header from '@/components/layout/header.vue'
import BusinessCard from '@/components/common/businessCard'
import Textbox from '@/components/common/textbox'
import ActivityCard from '@/components/common/activityCard'
export default {
  name: 'Detailspage',
  components: {
    Header,
    Textbox,
    BusinessCard,
    ActivityCard
  },
  data () {
    return {
      arrNew: {},
      counter: 3,
      num: 0,
      id: '',
      fromtaber: {
        image: '/images/jt.png',
        name: '邻里之家',
        state: '天空里10楼办公室',
        img: '/images/jt.png',
        text: '这碗香干豆腐味道不错。"“青椒炒蛋火候可以再大点。”一大早，江西省萍乡市安源区八一街老站社区“安源红”邻里之家幸福食堂就热闹了起来，志愿者们摩拳擦掌，迅速分工，淘米、洗菜、炒菜……“我们以聚餐试菜的形式，召开幸福食堂助餐服务工作会，希望可以保证口味，解决老年人"吃饭难”问题。"老站社区党委书记何凤娇表示。“安源红”邻里之家是安源区探索社区居家养老服务的一个尝试，社区、社会组织、社工以及社区志愿者等共同参与，幸福食堂、爱心超市、公益书屋、中医理疗室等一应俱全，满足老年群体“医、食、住、行等多方面需求。目前，安源区已建成59家“安源红”邻里之家居家养老服务站，老年人的获得感、幸福感、安全感不断提升。'
      },
      BusinessList: [
        {
          image: '/images/lgs.png',
          name: '刘国森',
          joinTime: '2020年09月24日',
          workTime: '厂矿食堂管理',
          unitTime: '1548.10小时'
        }, {
          image: '/images/tx3.jpg',
          name: '陈芝萍',
          joinTime: '2021年09月24日',
          workTime: '万佳食堂',
          unitTime: '1238.10小时'
        }, {
          image: '/images/tx2.jpg',
          name: '彭根华',
          joinTime: '2019年10月15日',
          workTime: '万佳食堂',
          unitTime: '1427.76小时'
        }, {
          image: '/images/tx3.jpg',
          name: '杜绍兰',
          joinTime: '2021年09月24日',
          workTime: '万佳食堂',
          unitTime: '42468.10小时'
        }, {
          image: '/images/tx4.jpg',
          name: '钟云香',
          joinTime: '2021年09月19日',
          workTime: '万佳食堂',
          unitTime: '4638.10小时'
        }
      ],
      ActivitList: [
        {
          title: '周未爱敲门',
          icon: '/images/yg.png', // 点标记图片路径
          state: '正常使用',
          mianji: '一种招募志愿者的倡议，旨在鼓励人们积极参与社区服务。'
        },
        {
          title: '银龄生日趴',
          icon: '/images/jt.png', // 点标记图片路径
          state: '正常使用',
          mianji: '安源红“邻里之家”如今在红色安源不断绽放出新的风采'
        },
        // {
        //   title: '蒲公英种子',
        //   icon: '/images/p1.png', // 点标记图片路径
        //   state: '正常使用',
        //   mianji: '因地制宜、一站一品。如今全区安源红“邻里之家”正呈现出各有千秋'
        // },
        {
          title: '关爱儿童',
          icon: '/images/p2.png', // 点标记图片路径
          state: '正常使用',
          mianji: '青山镇高枧村，探索形成了以“文化、致富”为核心内容的“友邻”体系'
        },
        {
          title: '童心港湾',
          icon: '/images/p3.png', // 点标记图片路径
          state: '正常使用',
          mianji: '萍乡水务有限公司开展学雷锋活动(周末课堂)'
        }, {
          title: '星星之家',
          icon: '/images/yg.png', // 点标记图片路径
          state: '正常使用',
          mianji: '关爱大龄孤独症等残障儿童'
        },
        {
          title: '幸福食堂',
          icon: '/images/jt.png', // 点标记图片路径
          state: '正常使用',
          mianji: '横龙街里善村，依托网格化服务管理，注重发挥“六支队伍”作用，全力打造“平安365”模式'
        },
        {
          title: '邻里之家',
          icon: 'http://images.china.cn/site1000/2022-11/11/9cb1ca9e-cc02-4b5e-91be-726f89c28bdb.jpg', // 点标记图片路径
          state: '正常使用',
          mianji: '区委区政府大胆尝试，成立萍乡市安源区活水源贸易有限公司、江西“邻里之家”'
        },
        {
          title: '入户走访',
          icon: 'http://images.china.cn/site1000/2022-11/11/c6e1d530-ff7c-4ede-b2c0-32a6443f72db.jpg', // 点标记图片路径
          state: '正常使用',
          mianji: '萍乡水务有限公司开展学雷锋活动,萍乡供电公司'
        },
        {
          title: '乡村振察',
          icon: 'http://images.china.cn/site1000/2022-11/11/a2b9f428-d904-42b1-9c4b-7ca70cf9fb76_zsize.jpg', // 点标记图片路径
          state: '正常使用',
          mianji: '萍乡水务有限公司开展学雷锋活动,萍乡供电公司'
        }, {
          title: '一村一愿',
          icon: '/images/yg.png', // 点标记图片路径
          state: '正常使用',
          mianji: '萍乡水务有限公司开展学雷锋活动,萍乡供电公司'
        },
        {
          title: '周未爱敲门',
          icon: '/images/yg.png', // 点标记图片路径
          state: '正常使用',
          mianji: '一种招募志愿者的倡议，旨在鼓励人们积极参与社区服务。'
        },
        {
          title: '银龄生日趴',
          icon: '/images/jt.png', // 点标记图片路径
          state: '正常使用',
          mianji: '安源红“邻里之家”如今在红色安源不断绽放出新的风采'
        },
        // {
        //   title: '蒲公英种子',
        //   icon: '/images/p1.png', // 点标记图片路径
        //   state: '正常使用',
        //   mianji: '因地制宜、一站一品。如今全区安源红“邻里之家”正呈现出各有千秋'
        // },
        {
          title: '关爱儿童',
          icon: '/images/p2.png', // 点标记图片路径
          state: '正常使用',
          mianji: '青山镇高枧村，探索形成了以“文化、致富”为核心内容的“友邻”体系'
        },
        {
          title: '童心港湾',
          icon: '/images/p3.png', // 点标记图片路径
          state: '正常使用',
          mianji: '关爱大龄孤独症等残障儿童'
        }, {
          title: '星星之家',
          icon: '/images/yg.png', // 点标记图片路径
          state: '正常使用',
          mianji: '萍乡水务有限公司开展学雷锋活动(周末课堂)：'
        },
        {
          title: '幸福食堂',
          icon: '/images/jt.png', // 点标记图片路径
          state: '正常使用',
          mianji: '横龙街里善村，依托网格化服务管理，注重发挥“六支队伍”作用，全力打造“平安365”模式'
        },
        {
          title: '邻里之家',
          icon: 'http://images.china.cn/site1000/2022-11/11/9cb1ca9e-cc02-4b5e-91be-726f89c28bdb.jpg', // 点标记图片路径
          state: '正常使用',
          mianji: '区委区政府大胆尝试，成立萍乡市安源区活水源贸易有限公司、江西“邻里之家”'
        },
        {
          title: '入户走访',
          icon: 'http://images.china.cn/site1000/2022-11/11/c6e1d530-ff7c-4ede-b2c0-32a6443f72db.jpg', // 点标记图片路径
          state: '正常使用',
          mianji: '萍乡水务有限公司开展学雷锋活动,萍乡供电公司：'
        },
        {
          title: '乡村振察',
          icon: 'http://images.china.cn/site1000/2022-11/11/a2b9f428-d904-42b1-9c4b-7ca70cf9fb76_zsize.jpg', // 点标记图片路径
          state: '正常使用',
          mianji: '萍乡水务有限公司开展学雷锋活动,萍乡供电公司：'
        }, {
          title: '一村一愿',
          icon: '/images/yg.png', // 点标记图片路径
          state: '正常使用',
          mianji: '萍乡水务有限公司开展学雷锋活动,萍乡供电公司：'
        }
      ]
    }
  },
  created () {
    if (this.$route.params.id !== undefined) {
      sessionStorage.setItem('arrNew', JSON.stringify(this.$route.params.id))
      this.arrNew = this.$route.params.id
    } else {
      this.arrNew = JSON.parse(sessionStorage.getItem('arrNew'))
    }
  },
  mounted () {
    setInterval(this.createcount, 5000)
  },
  methods: {
    createcount () {
      if (this.num + 3 < this.BusinessList.length) {
        this.num = this.num + 3
        if (this.num + 1 === this.BusinessList.length) {
          this.counter = 1
        }
        if (this.num + 2 === this.BusinessList.length) {
          this.counter = 2
        }
      } else {
        this.num = 0
        this.counter = 3
      }
    }
  }
}
</script>

<style scoped>
.dv-decoration-9 {
  position: absolute !important;
  bottom: 0;
  left: 0;
}
.title-name{
  font-size: 3vh;
  margin: 2vh;
}
.title-state{
  font-size: 2vh;
  margin: 3vh;
}
.business{
  margin-right: 5vw;
}
.activity{
  height: 100%;
  margin-right: 3vw;
  animation: scrollAnimation 30s linear infinite;
}
@keyframes scrollAnimation {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1000%); }
}
</style>
